<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>车辆管理</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-fileupload.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        a {
            cursor: pointer;
        }

        .list-group a {
            background-color: #393d49;
            border: 0px;
            color: white;

        }

        .list-group a:hover {
            background-color: #12967c;
            border: 0px;
            color: white;

        }


    </style>

</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <a href="">
            <div class="layui-logo">驾校预约管理系统</div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <div class="layui-nav layui-layout-right ">
            <!-- Single button -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img id="img" src="../img/mmexport1508332669479.jpg" class="layui-nav-img"><span
                            id="usernameheader">xs-shuai </span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="userInfo.html">个人中心</a>
                        </dd>
                        <dd>
                            <a href="/login/logout">注销登录</a>
                        </dd>

                    </dl>
                </li>

            </ul>

        </div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <div class="list-group">
                <a href="index.html" class="list-group-item ">首页</a>
                <a href="studentManger.html" class="list-group-item">学员管理</a>
                <a href="teacherManger.html" class="list-group-item">教练管理</a>
                <a href="cartManger.html" class="list-group-item active">车辆管理</a>
                <a href="relationshipManager.html" class="list-group-item">关系管理</a>
                <a href="repairManger.html" class="list-group-item">车辆维修模块</a>
                <a href="userInfo.html" class="list-group-item">个人中心</a>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <p class="h3">车辆管理</p>
        <div class="col-md-12">
            <div>
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addmodal" id="addCar"
                        aria-label="Left Align">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true">添加</span>
                </button>

            </div>
        </div>
        <div class="col-md-12" style="margin-top: 15px">
            <form class="form-inline">
                <div class="form-group col-md-4">
                    <label class="sr-only bg-success">车牌</label>
                    <div class="col-md-10 ">
                        <input type="text" id="cartNumberTitle" class="form-control" placeholder="车牌">
                    </div>
                </div>
                <div class="form-group col-md-2">
                    <label>驾照类型</label>
                    <select class="form-control" id="driverClassTitle">
                        <option value="">不限</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label>车量类型</label>
                    <select class="form-control" id="carStaut" placeholder="车辆状态">
                        <option value="">不限</option>
                        <option value="正常">正常</option>
                        <option value="维修">维修</option>
                        <option value="备用">备用</option>
                        <option value="报废">报废</option>
                    </select>
                </div>
                <button type="button" id="search" class="btn  btn-success">查询</button>
            </form>
        </div>
        <div class="col-md-12" style="margin-top: 5px">
            <table class="table table-condensed"
            >
                <thead>
                <th>序号</th>
                <th>车牌</th>
                <th>驾照类型</th>
                <th>状态</th>
                <th>购买时间</th>
                <th>报废时间</th>
                <th>操作</th>
                </thead>
                <tbody id="table"></tbody>
            </table>
        </div>


    </div>
    <div class="layui-footer">
        © 2022 <a href="#">singulee.com</a>
    </div>
</div>
<!--模态框-->
<div class="modal" id="addmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加
                </h4>
            </div>
            <div class="modal-body">
                <!--添加框-->
                <div class="form-horizontal">
                    <input type="hidden" class="form-control" id="cartId" value="">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            车牌</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="carNumber" placeholder="车牌">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            状态</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="cartStaute">
                                <option value="正常">正常</option>
                                <option value="维修">维修</option>
                                <option value="备用" selected>备用</option>
                                <option value="报废">报废</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            驾驶证类型</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="driverClass">

                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            买入时间</label>
                        <div class="col-sm-8">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="startDate" placeholder="购买时间">
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="outDatetimeGroup">
                        <label class="col-sm-3 control-label">
                            报废日期</label>
                        <div class="col-sm-8">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="outDate"  placeholder="报废时间">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button id="submit" type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-fileupload.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../js/myjs.js"></script>
<script>
    // 日期控件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#outDate'
        });
    })


    $(function () {
        shouimg();
        // 页面加载时返回科目类型数据
        getDriverClass();
        getCartList();

        // 单击提交
        $("#submit").click(function () {
            if ($("#cartId").val() == null || $("#cartId").val().trim().length == 0) {
                //添加
                addcart();
            } else {
                // 修改
                updatecart();
            }
        })

        //查询
        $("#search").click(function () {
            getCartList();
        })

        $("#addCar").click(function () {
            $("#carNumber").val("");
            $("#cartStaute").val("");
            $("#startDate").val("");
            $("#outDate").val("");
        })


        //获得驾照信息
        function getDriverClass() {
            $.ajax({
                url: "/driver/getDriverList",
                type: "post",
                cache: false,
                contentType: "application/json",
                datatype: "json",
                success: function (response) {
                    if (response.code == 200) {
                        addDriverClassforSelect(response.data);
                    }
                }
                ,
                error: function (response) {
                    console.log("出错返回: " + response);
                    console.log("出错数据: " + JSON.stringify(response));
                }
            });

        }

        //驾照类型添加下拉框
        function addDriverClassforSelect(data) {
            var option;
            var optiontile;
            for (var i = 0; i < data.length; i++) {
                option = $("<option value='" + data[i].driverid + "'>" + data[i].driverdescription + "</option>")
                optiontile = $("<option value='" + data[i].driverid + "'>" + data[i].driverdescription + "</option>")
                $("#driverClass").append(option);
                $("#driverClassTitle").append(optiontile);
            }

        }


    })

    //添加车辆信息
    function addcart() {
        var cartnumber = $("#carNumber").val().trim();
        var cartdriverclass = $("#driverClass").val();
        var cartstartdate = $("#startDate").val();
        if (cartnumber.length = 0 || cartdriverclass.length == 0 || cartstartdate.length == 0) {
            layer.msg('请填写完整信息', {
                time: 1000,
                btn: ['好的']
            })
            return;
        }
        var json =
            {
                carnumber: cartnumber,
                cardriverclass: cartdriverclass,
                staute: "备用",
                cartstartdate: cartstartdate
            }
        $.ajax({
            url: "/cart/addCart",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    layer.msg('添加成功', {
                        time: 1000,
                        btn: ['好的']
                    })
                    $("#addmodal").modal('hide');
                    getCartList();
                } else {
                    layer.msg(response.msg, {
                        time: 1000,
                        btn: ['好的']
                    })
                }
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });
    }

    //添加tr
    function addtr(data) {
        $("#table").empty();
        var tr;
        for (var i = 0; i < data.length; i++) {
            if (data[i].staute !== "报废") {
                tr = $("<tr><td>" + (i + 1) + "</td><td>" + data[i].carNumber + "</td>" +
                    "<td>" + data[i].driverDescription + "</td><td>" + data[i].staute + "</td><td>" + dateString(data[i].cartStartDate) + "</td>" +
                    "<td>" + dateString(data[i].carEndDate) + "</td>" +
                    "<td><input hidden value='" + data[i].carId + "'><a data-toggle='modal' data-target='#addmodal' onclick='getdetail(this)'  >详情</a>|<a class='delete' onclick='remove(this)'>报废</a></td></tr>");
            } else {
                tr = $("<tr><td>" + i + "</td><td>" + data[i].carNumber + "</td>" +
                    "<td>" + data[i].driverDescription + "</td><td>" + data[i].staute + "</td><td>" + dateString(data[i].cartStartDate) + "</td>" +
                    "<td>" + dateString(data[i].carEndDate) + "</td>" +
                    "<td><input hidden value='" + data[i].carId + "'><a data-toggle='modal' data-target='#addmodal' onclick='getdetail(this)'  >详情</a></td></tr>");

            }


            $("#table").append(tr);
        }


    }

    //修改方法
    function updatecart() {
        var carid = $("#cartId").val();
        var cartnumber = $("#carNumber").val().trim();
        var cartdriverclass = $("#driverClass").val();
        var cartstartdate = $("#startDate").val();
        var staute = $("#cartStaute").val()
        if (cartnumber.length = 0 || cartdriverclass.length == 0 || cartstartdate.length == 0) {
            layer.msg('请填写完整信息', {
                time: 1000,
                btn: ['好的']
            })
            return;
        }
        var json =
            {
                carid: carid,
                carnumber: cartnumber,
                cardriverclass: cartdriverclass,
                staute: staute,
                cartstartdate: cartstartdate
            }
        $.ajax({
            url: "/cart/updateCart",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    layer.msg('修改成功', {
                        time: 1000,
                        btn: ['好的']
                    })
                    $("#addmodal").modal('hide');
                    getCartList();
                } else {
                    layer.msg(response.msg, {
                        time: 1000,
                        btn: ['好的']
                    })
                }
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });
    }

    //报销车辆
    function remove(obj) {
        var carId = $(obj).parent().find('input').eq(0).val();
        var json =
            {
                carid: carId,
            }
        $.ajax({
            url: "/cart/removeCar",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    layer.msg(response.msg, {
                        time: 1000,
                        btn: ['好的']
                    })
                } else {
                    layer.msg(response.msg, {
                        time: 1000,
                        btn: ['好的']
                    })

                }
                getCartList()
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });

    }

    //多条件查询
    function getCartList() {

        var json =
            {
                carnumber: $("#cartNumberTitle").val().trim(),
                cardriverclass: $("#driverClassTitle").val(),
                staute: $("#carStaut").val().trim(),
            }
        $.ajax({
            url: "/cart/getCartList",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    //渲染数据
                    addtr(response.data)
                } else {
                    $("#table").empty();
                }
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });


    }

    // 获得车辆详情
    function getdetail(obj) {
        var carId = $(obj).parent().find('input').eq(0).val();
        var json =
            {
                carId: carId,

            }
        $.ajax({
            url: "/cart/getCartDetail",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    //渲染到模态框
                    showCartDetail(response.data)
                }
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });
    }

    //渲染车辆信息
    function showCartDetail(data) {
        $("#cartId").val(data.carid);
        $("#carNumber").val(data.carnumber);
        $("#startDate").val(dateString(data.cartstartdate));
        $('#outDate').val(dateString(data.carenddate));

        $("#endDate").val(dateString(data.carenddate) == "--" ? "" : dateString(data.carenddate))

        var optionSta = $("#cartStaute option")
        for (var i = 0; i < optionSta.length; i++) {
            if (optionSta.get(i).value == data.staute) {
                optionSta.get(i).selected = true;
                break;
            }
        }
        var option = $("#driverClass option")
        for (var i = 0; i < option.length; i++) {
            if (option.get(i).value == data.cardriverclass) {
                option.get(i).selected = true;
                break;
            }
        }


    }
</script>
</html>
